<template>
  <div>
    <div class="swiper-container sb" v-if="isPhone">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../assets/images/hh.png"/></div>
        <div class="swiper-slide"><img src="../assets/images/hh1.jpg"/></div>
        <div class="swiper-slide"><img src="../assets/images/hh2.jpg"/></div>
        <div class="swiper-slide"><img src="../assets/images/hh3.jpg"/></div>

      </div>
    </div>

    <div class="swiper-container pc" v-if="!isPhone">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../assets/logo.png"/></div>
        <div class="swiper-slide">pc</div>
        <div class="swiper-slide">pc</div>
      </div>
      <div class="swiper-pagination"></div>

    </div>
  </div>


</template>

<script>
  import Swiper from 'swiper/dist/js/swiper.min'

  export default {
    name: "carousel",
    data() {
      return {
        isPhone: navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1
      }
    },
    mounted() {
      console.log(this.isPhone, navigator.userAgent)
      if (this.isPhone) {
        let cellPhone = new Swiper('.sb', {
          effect: 'cube',
          cubeEffect: {
            slideShadows: true,
            shadow: true,
            shadowOffset: 100,
            shadowScale: 0.6
          },
          loop: true,
        });
      }
      else {
        let pc = new Swiper('.pc', {
          clickable:true,
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets'
          },
          loop: true,
        });
      }
    }
  }
</script>

<style scoped>

  @import "../assets/css/swiper.css";

  .swiper-container {
    width: 300px;
    height: 300px;
  }

  .pc {
    width: 600px;
    height: 300px;
  }
</style>
